<!--
 * @Author       : ionluo(2437403125@qq.com)
 * @Description  :
 * @Date         : 2024-05-11 22:56:57
-->

<template>
  <div class="today-users">
    <common-card title="今日交易用户数" value="81,014">
      <template>
        <div id="today-users-chart" :style="{ width: '100%', height: '100%' }"/>
      </template>
      <template v-slot:footer>
        <span>退货率</span>
        <span class="emphasis">5.14%</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import commonCardMixins from '@/mixins/commonCardMixins'

let chatResizeFn = _ => {}
export default {
  name: 'TodayUsers',
  mixins: [commonCardMixins],
  data () {
    return {

    }
  },
  mounted () {
    const myChart = this.$echarts.init(document.getElementById('today-users-chart'))
    myChart.setOption({
      xAxis: {
        type: 'category', // 坐标轴类型，值category/value, 默认是 value
        data: [...new Array(14).keys()].map(item => `${item.toString().padStart(2, '0')}:00`), // 生成和series一样长度
        show: false // 隐藏坐标轴
      },
      yAxis: {
        show: false
      },
      series: [{
        type: 'bar',
        data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150],
        barWidth: '60%'
      }],
      color: ['#3398DB'],
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    })
    // resize 重绘
    chatResizeFn = myChart.resize
    window.addEventListener('resize', chatResizeFn)
  },
  beforeDestroy () {
    window.removeEventListener('resize', chatResizeFn)
  }
}
</script>

<style lang="scss" scoped></style>
